<template>
  <div class="shoporder">
    <el-form ref="form" :model="form" label-width="80px">
      <el-row type="flex">
        <el-col :span="3">
          <el-form-item>
            <el-input
              v-model="form.name"
              placeholder="请输入用户昵称"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="3"
          ><el-form-item>
            <el-input
              v-model="form.addname"
              placeholder="请输入收货人名称"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="3"
          ><el-form-item>
            <el-input
              v-model="form.orderid"
              placeholder="请输入订单编号"
            ></el-input> </el-form-item
        ></el-col>

        <el-col :span="5">
          <el-form-item>
            <el-date-picker
              v-model="form.startenddata"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="2"
          ><el-form-item>
            <el-select v-model="form.region" placeholder="请选择订单状态">
              <el-option label="未支付" value="101"></el-option>
              <el-option label="用户取消" value="102"></el-option>
              <el-option label="系统取消" value="103"></el-option>
              <el-option label="已支付" value="201"></el-option>
              <el-option label="申请退款" value="202"></el-option>
              <el-option label="已退款" value="203"></el-option>
              <el-option label="已发货" value="301"></el-option>
              <el-option label="用户收货" value="401"></el-option>
              <el-option label="系统收货" value="402"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-button type="primary" icon="el-icon-search" @click="onSubmit1()"
          >查询</el-button
        >
        <el-button type="primary" icon="el-icon-download" @click="handleDaochu"
          >导出</el-button
        >
      </el-row>

      <el-row type="flex"> </el-row>
    </el-form>

    <!-- content -->
    <div class="form-box">
      <!--  tableData 他是后端请求的数据-->
      <!-- prop对应的是后端给的字段 -->
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        @expand-change="expandChange"
        :row-key="getRowKeys"
      >
        <el-table-column type="expand">
          <template slot-scope="scope">
            <div class="shopintroduce">
              <img :src="scope.row.goodsVoList[0].picUrl" alt="" />
              <div class="word">
                <span>商品名称:{{ scope.row.goodsVoList[0].goodsName }}</span>
                <span
                  >规格:{{ scope.row.goodsVoList[0].specifications[0] }}</span
                >
                <span>单价:{{ scope.row.goodsVoList[0].price }}</span>
                <span>数量:{{ scope.row.goodsVoList[0].number }}</span>
                <span
                  >小计:{{
                    scope.row.goodsVoList[0].number *
                    scope.row.goodsVoList[0].price
                  }}</span
                >
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="orderSn" show-overflow-tooltip label="订单编号">
        </el-table-column>

        <el-table-column
          prop="userAvatar"
          show-overflow-tooltip
          label="用户头像"
        >
          <template slot-scope="scope">
            <img :src="scope.row.userAvatar" alt="" style="width: 50px" />
          </template>
        </el-table-column>

        <el-table-column prop="userName" show-overflow-tooltip label="下单用户">
        </el-table-column>

        <el-table-column prop="addTime" show-overflow-tooltip label="下单时间">
        </el-table-column>

        <el-table-column
          prop="orderStatus"
          show-overflow-tooltip
          label="订单状态"
          ><template slot-scope="scope">
            <el-button type="primary" v-if="scope.row.orderStatus == 301"
              >已发货</el-button
            >
            <el-button type="primary" v-if="scope.row.orderStatus == 101"
              >未支付</el-button
            >
            <el-button type="primary" v-if="scope.row.orderStatus == 102"
              >用户取消</el-button
            >
            <el-button type="primary" v-if="scope.row.orderStatus == 103"
              >系统取消</el-button
            >
            <el-button type="primary" v-if="scope.row.orderStatus == 201"
              >已支付</el-button
            >
            <el-button type="primary" v-if="scope.row.orderStatus == 202"
              >申请退款</el-button
            >
            <el-button type="primary" v-if="scope.row.orderStatus == 203"
              >已退款</el-button
            >
            <el-button type="primary" v-if="scope.row.orderStatus == 401"
              >用户收货</el-button
            >
            <el-button type="primary" v-if="scope.row.orderStatus == 402"
              >系统收货</el-button
            >
          </template>
        </el-table-column>

        <el-table-column
          prop="orderPrice"
          show-overflow-tooltip
          label="订单金额"
        >
        </el-table-column>

        <el-table-column
          prop="actualPrice"
          show-overflow-tooltip
          label="实付金额"
        >
        </el-table-column>

        <el-table-column prop="payTime" show-overflow-tooltip label="支付时间">
        </el-table-column>

        <el-table-column prop="consignee" show-overflow-tooltip label="收货人">
        </el-table-column>

        <el-table-column prop="mobile" show-overflow-tooltip label="收货电话">
        </el-table-column>

        <el-table-column prop="shipSn" show-overflow-tooltip label="物流单号">
        </el-table-column>

        <el-table-column
          prop="shipChannel"
          show-overflow-tooltip
          label="物流渠道"
        >
        </el-table-column>

        <el-table-column label="操作" width="400px">
          <template slot-scope="scope">
            <el-button type="primary" @click="handleDetail(scope.row)"
              >详情</el-button
            >

            <el-button type="danger" @click="handleDel(scope.row)"
              >删除</el-button
            >

            <el-button type="warning" @click="handleReceive(scope.row)"
              >收款</el-button
            >

            <el-button type="primary" @click="sendorder(scope.row)"
              >发货</el-button
            >

            <el-button type="danger" @click="returnpay(scope.row)"
              >退款</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <pagination
        :total="obj.total"
        @handleSize="handleSizeChange"
        @handleCurrent="handleCurrentChange"
      ></pagination>
    </div>

    <!-- 弹出框 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- 发货 -->
        <el-form-item
          v-if="title == '发货'"
          label="快递公司"
          prop="shipChannel"
        >
          <el-select v-model="ruleForm.shipChannel">
            <el-option label="中通快递" value="1"></el-option>
            <el-option label="圆通快递" value="2"></el-option>
            <el-option label="韵达快递" value="3"></el-option>
            <el-option label="邮政快递包裹" value="4"></el-option>
            <el-option label="EMS" value="5"></el-option>
            <el-option label="德邦快递" value="6"></el-option>
            <el-option label="快捷快递" value="7"></el-option>
            <el-option label="宅急送" value="8"></el-option>
            <el-option label="TNT快递" value="9"></el-option>
            <el-option label="UPS" value="10"></el-option>
            <el-option label="DHL" value="11"></el-option>
            <el-option label="FEDEX(国内件)" value="12"></el-option>
            <el-option label="FEDEX(国际件)" value="13"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item v-if="title == '发货'" label="快递编号" prop="shipSn">
          <el-input v-model="ruleForm.shipSn"></el-input>
        </el-form-item>

        <!-- 详情 -->
        <el-form-item
          v-if="title == '订单详情'"
          prop="orderSn"
          label="订单编号"
        >
          <el-input v-model="ruleForm.orderSn"></el-input>
        </el-form-item>

        <el-form-item
          v-if="title == '订单详情'"
          prop="orderStatus"
          label="订单状态"
        >
          <el-input v-model="ruleForm.orderStatus"></el-input>
        </el-form-item>

        <el-form-item
          v-if="title == '订单详情'"
          prop="userName"
          label="订单用户"
        >
          <el-input v-model="ruleForm.userName"></el-input>
        </el-form-item>

        <el-form-item
          v-if="title == '订单详情'"
          prop="message"
          label="用户留言"
        >
          <el-input v-model="ruleForm.message"></el-input>
        </el-form-item>

        <el-form-item
          v-if="title == '订单详情'"
          prop="address"
          label="收货信息"
        >
          <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>

        <el-form-item v-if="title == '订单详情'" prop="detail" label="商品信息">
          <el-table :data="tableData1" border style="width: 100%">
            <el-table-column prop="goodsName" label="商品名称" width="180">
            </el-table-column>
            <el-table-column prop="goodsId" label="商品编号" width="180">
            </el-table-column>
            <el-table-column prop="specifications" label="商品规格">
            </el-table-column>
            <el-table-column prop="price" label="商品价格"> </el-table-column>
            <el-table-column prop="number" label="商品数量"> </el-table-column>
            <el-table-column prop="picUrl" label="货物图片">
              <img :src="picture" alt="" style="width: 50px" />
            </el-table-column>
          </el-table>
        </el-form-item>

        <el-form-item
          v-if="title == '订单详情'"
          prop="actualPrice"
          label="费用信息"
        >
          <el-input v-model="ruleForm.actualPrice"></el-input>
        </el-form-item>

        <el-form-item
          v-if="title == '订单详情'"
          prop="addTime"
          label="支付信息"
        >
          <el-input v-model="ruleForm.addTime"></el-input>
        </el-form-item>

        <el-form-item
          v-if="title == '订单详情'"
          prop="goodsId"
          label="快递信息"
        >
          <el-input v-model="ruleForm.goodsId"></el-input>
        </el-form-item>

        <el-form-item v-if="title == '订单详情'" prop="" label="退款金额">
          <el-input v-model="ruleForm.backmoney"
            >(退款进入) 元 (退款类型) (退款备注) (退款时间)</el-input
          >
        </el-form-item>

        <el-form-item v-if="title == '订单详情'" prop="" label="收货信息">
          <el-input v-model="ruleForm.receivemess"></el-input>
        </el-form-item>

        <!-- 退款 -->
        <el-form-item
          v-if="title == '退款'"
          label="退款金额"
          prop="actualPrice"
        >
          <el-input :disabled="true" v-model="ruleForm.actualPrice"></el-input>
        </el-form-item>

        <!-- 付款  -->

        <el-form-item
          v-if="title == '订单收款'"
          prop="nowdata"
          label="确认信息"
        >
          <el-input v-model="ruleForm.nowdata"></el-input>
        </el-form-item>

        <el-form-item
          v-if="title == '订单收款'"
          label="订单金额"
          prop="orderpay"
        >
          <el-input :disabled="true" v-model="ruleForm.orderpay"></el-input>
        </el-form-item>

        <el-form-item
          v-if="title == '订单收款'"
          label="付款金额"
          prop="needpay"
        >
          <el-input v-model="ruleForm.needpay"></el-input>
        </el-form-item>

        <el-table
          v-if="title == '订单收款'"
          :data="tableData1"
          border
          style="width: 90%; margin-left: 45px"
        >
          <el-table-column prop="goodsName" label="商品名称" width="180">
          </el-table-column>
          <el-table-column prop="specifications" label="商品规格">
          </el-table-column>

          <el-table-column prop="number" label="商品数量"> </el-table-column>
        </el-table>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <!-- <template slot-scope="scope">
            
          </template> -->
        <el-button v-if="title == '发货'" @click="closeForm()">取消</el-button>

        <el-button v-if="title == '订单详情'" @click="closeForm()"
          >取消</el-button
        >

        <el-button v-if="title == '订单收款'" @click="closeForm()"
          >取消</el-button
        >

        <el-button
          type="primary"
          v-if="title == '订单详情'"
          @click="printdetail()"
          >打印</el-button
        >

        <el-button type="primary" v-if="title == '发货'" @click="handleSubmit()"
          >确定</el-button
        >

        <el-button
          type="primary"
          v-if="title == '订单收款'"
          @click="handleClick()"
          >确定</el-button
        >

        <el-button v-if="title == '退款'" @click="closeForm()">取消</el-button>

        <el-button
          type="primary"
          v-if="title == '退款'"
          @click="handlerefundMoney()"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pagination from "./components/pagination.vue";
import { listOrder } from "@/api/order";
import { shipOrder } from "@/api/order";
import { refundOrder } from "@/api/order";
import { deleteOrder } from "@/api/order";
import { payOrder } from "@/api/order";
import * as XLSX from "xlsx";
import { saveAs } from "file-saver";
export default {
  name: "user",
  components: {
    pagination,
  },
  data() {
    return {
      picture: "",
      ids: "",
      title: "",
      activeNames: ["1"],
      tableData: [],
      tableData1: [
        {
          goodsName: "",
          goodsId: "",
          specifications: "",
          price: "",
          number: "",
          picUrl: "",
        },
      ],
      form: {
        orderid: "",
        name: "",
        addname: "",
        startenddata: "",
        region: "",
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      obj: {
        // 页码
        page: 1,
        // 每页多少条
        rows: 10,
        // 默认选中哪一页
        currentPage: 1,
        total: null,
      },
      dialogVisible: false,
      ruleForm: {
        shipChannel: "",
        shipSn: "",
        actualPrice: "（实际费用）",
        orderSn: "",
        orderStatus: "",
        userName: "",
        message: "",
        address: "",
        goodsName: "",
        addTime: "（支付渠道） 微信支付 （支付时间）",
        goodsId: "",
        backmoney: "（退款金额）元（退款类型）（退款备注）（退款时间）",
        receivemess: "（确认收货时间）",

        nowdata: "确认当前订单（订单编号",
        orderpay: "",
        needpay: "",
      },
    };
  },
  methods: {
    // 折叠开始
    getRowKeys: function (row) {
      return row.id;
    },
    expandChange(row, expandedRows) {
      var that = this;
      if (expandedRows.length) {
        that.expands = [];
        if (row) {
          that.expands.push(row.id);
        }
      } else {
        that.expands = [];
      }
      let data = {
        demandNumber: row.demandNumber,
      }; //this.ddlist = row.bigType
      // Interfaceserver.findAllBaseEngineerOrder(data).then((res) => {
      //   this.ddlist = res.dataList;
      // });
    },
    // 折叠结束

    // 数据
    onsubmit() {
      // let da = {
      //   page: this.obj.page,
      //   limit: this.obj.rows,
      //   // sort: add_time,
      //   // order: desc,
      // };
      listOrder().then((res) => {
        console.log(res.data);

        this.obj.total = res.data.data.total;
        this.tableData = res.data.data.list;
      });
    },

    // 搜索
    onSubmit1() {
      let da = {
        nickname: this.form.name,
        consignee: this.form.addname,
        orderSn: this.form.orderid,
        orderStatusArray: this.form.region,
      };
      listOrder(da).then((res) => {
        console.log(res.data);

        this.obj.total = res.data.data.total;
        this.tableData = res.data.data.list;
      });
    },

    // 分页开始
    handleSizeChange(val) {
      console.log(val, "接收");
      // 当我点击每页多少条的时候赋值并重新渲染页面
      this.obj.rows = val;
      this.onSubmit();
    },
    handleCurrentChange(val) {
      console.log(val, "接收");
      // 当我点击页码的时候将页码赋值给变量并重新渲染页面
      this.obj.page = val;
      this.onSubmit();
    },
    // 分页结束

    handleChange(val) {
      console.log(val);
    },

    // 发货
    sendorder(row) {
      this.ids = row.id;
      this.title = "发货";
      // 开启模态框
      this.dialogVisible = true;

      console.log(row);

      this.ruleForm.shipChannel = row.shipChannel;
      if (this.ruleForm.shipChannel == "ZTO") {
        this.ruleForm.shipChannel = "中通快递";
      }
      this.ruleForm.shipSn = row.shipSn;
    },

    // 取消按钮
    closeForm() {
      // 清空验证并清空内容
      this.$refs["ruleForm"].resetFields();
      // 关闭模态框
      this.dialogVisible = false;
    },

    // 确定发货
    handleSubmit() {
      let da = {
        orderId: this.ids,
        shipChannel: this.ruleForm.shipChannel,
        shipSn: this.ruleForm.shipSn,
      };
      shipOrder(da).then((res) => {
        // console.log(res.data.data.errmsg, "new");
      });
      this.$notify.error({
        title: "失败",
        message: "订单不能确认收货",
      });
    },

    // 退款
    returnpay(row) {
      this.ids = row.id;
      this.title = "退款";
      // 开启模态框
      this.dialogVisible = true;

      console.log(row);

      this.ruleForm.actualPrice = row.actualPrice;
    },

    // 确定退款
    handlerefundMoney() {
      let da = {
        orderId: this.ids,
        refundMoney: this.ruleForm.actualPrice,
      };
      refundOrder(da).then((res) => {
        // console.log(res, "new");
      });
      this.$notify.error({
        title: "失败",
        message: "订单不能确认收货",
      });
    },

    // 详情
    handleDetail(row) {
      // console.log(row.goodsVoList[0].picUrl, "res");
      this.picture = row.goodsVoList[0].picUrl;
      this.ruleForm.actualPrice = "";
      this.ruleForm.goodsId = "";
      // this.ruleForm.addTime = "";

      this.dialogVisible = true;
      this.title = "订单详情";

      this.ruleForm.orderSn = row.orderSn;
      this.ruleForm.orderStatus = row.orderStatus;

      if (this.ruleForm.orderStatus == 101) {
        this.ruleForm.orderStatus = "未支付";
      }
      if (this.ruleForm.orderStatus == 102) {
        this.ruleForm.orderStatus = "用户取消";
      }
      if (this.ruleForm.orderStatus == 103) {
        this.ruleForm.orderStatus = "系统取消";
      }
      if (this.ruleForm.orderStatus == 201) {
        this.ruleForm.orderStatus = "已支付";
      }
      if (this.ruleForm.orderStatus == 202) {
        this.ruleForm.orderStatus = "申请退款";
      }
      if (this.ruleForm.orderStatus == 203) {
        this.ruleForm.orderStatus = "已退款";
      }
      if (this.ruleForm.orderStatus == 301) {
        this.ruleForm.orderStatus = "已发货";
      }
      if (this.ruleForm.orderStatus == 401) {
        this.ruleForm.orderStatus = "用户收货";
      }
      if (this.ruleForm.orderStatus == 402) {
        this.ruleForm.orderStatus = "系统收货";
      }

      this.ruleForm.userName = row.orderSn;
      this.ruleForm.orderSn = row.userName;
      this.ruleForm.message = row.message;
      this.ruleForm.address =
        "（收货人）" +
        row.consignee +
        "（手机号）" +
        row.mobile +
        "（地址）" +
        row.address;

      this.tableData1[0].goodsName = row.goodsVoList[0].goodsName;
      this.tableData1[0].goodsId = row.goodsVoList[0].goodsId;
      this.tableData1[0].specifications = row.goodsVoList[0].specifications[0];
      this.tableData1[0].price = row.goodsVoList[0].price;
      this.tableData1[0].number = row.goodsVoList[0].number;
      this.tableData1[0].picUrl = row.goodsVoList[0].picUrl;
      this.picture = this.tableData1[0].picUrl;

      this.ruleForm.actualPrice +=
        row.actualPrice +
        "元" +
        "=" +
        "（商品总价）" +
        row.orderPrice +
        "元" +
        "+" +
        "（快递费用）" +
        row.integralPrice +
        "元" +
        "-" +
        "（优惠减免）0元" +
        "-" +
        "（积分税免）" +
        row.freightPrice +
        "元";

      if (row.payTime == undefined) {
        this.ruleForm.addTime += " ";
      } else {
        this.ruleForm.addTime += row.payTime;
      }

      if (row.shipChannel == undefined) {
        this.ruleForm.goodsId = "（快递公司）" + " ";
      } else {
        this.ruleForm.goodsId = "（快递公司）" + row.shipChannel;
      }
      if (row.shipSn == undefined) {
        this.ruleForm.goodsId += "（快递单号）" + " ";
      } else {
        this.ruleForm.goodsId += "（快递单号）" + row.shipSn;
      }

      if (row.payTime == undefined) {
        this.ruleForm.goodsId += "（发货时间）" + " ";
      } else {
        this.ruleForm.goodsId += "（发货时间）" + row.payTime;
      }

      this.ruleForm.backmoney += "";
      this.ruleForm.receivemess += "";

      // this.ruleForm.orderSn = row.orderSn;

      console.log(row, "row");
    },

    // 收款
    handleReceive(row) {
      this.ids = row.id;
      console.log(row, "row");

      this.tableData1[0].specifications = "";
      this.tableData1[0].number = "";
      this.tableData1[0].goodsName = "";

      this.dialogVisible = true;
      this.title = "订单收款";

      this.ruleForm.nowdata += row.orderSn + ") 已经完成线下收款 ？";
      this.ruleForm.orderpay = row.goodsVoList[0].price;
      this.ruleForm.needpay = row.actualPrice;

      this.tableData1[0].goodsName = row.goodsVoList[0].goodsName;

      this.tableData1[0].specifications = row.goodsVoList[0].specifications[0];
      this.tableData1[0].number = row.goodsVoList[0].number;
    },

    // 确定收款
    handleClick() {
      let da = {
        newMoney: this.ruleForm.orderpay,
        oldMoney: this.ruleForm.needpay,
        orderId: this.ids,
        orderSn: this.ruleForm.orderSn,
      };
      payOrder(da).then((res) => {
        // console.log(res, "new");
      });
      this.$notify.error({
        title: "失败",
        message: "当前订单状态不支持线下付款",
      });
      this.dialogVisible = false;
    },

    // 删除
    handleDel(row) {
      let da = {
        orderId: row.id,
      };
      deleteOrder(da).then((res) => {
        // console.log(res, "new");
      });
      this.$notify.error({
        title: "失败",
        message: "订单不能删除",
      });
    },

    // 导出
    handleDaochu() {
      // 创建一个workbook
      this.$confirm("确定是否导出, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "导出成功!",
          });
          const workbook = XLSX.utils.book_new(); // 导出数据
          const worksheet = XLSX.utils.json_to_sheet(this.tableData);
          XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet 1"); // 将workbook转为二进制数据

          const excelData = XLSX.write(workbook, {
            type: "array",
            bookType: "xlsx",
          }); // 创建blob对象并保存excel文件
          const blob = new Blob([excelData], {
            type: "application/octet-stream",
          }); // 设置导出文件名字
          saveAs(blob, "data.xlsx");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  mounted() {
    this.onsubmit();
  },
};
</script>

<style lang="scss" scoped>
@import "@/views/mall/mallstyle/order.scss";
</style>
